<template>
  <div class="addPost">
    <van-form @submit="onSubmit">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" >发表帖子</van-divider>
      <van-field label="选择主题" name="主题名" placeholder="主题名" clickable v-model="addForm.themeName" readonly @click="showPicker = true" :rules="[{ required: true, message: '请选择主题' }]"  />
        <van-field
          v-model="addForm.tittle"
          name="标题"
          label="标题"
          placeholder="请填写标题"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
      <!-- 富文本编辑器组件 -->
      <quill-editor v-model="addForm.body"/>
      <!-- 添加商品按钮 -->
      <van-button class="btnAdd" type="info" native-type="submit">发表</van-button>
    </van-form>
    <van-popup v-model="showPicker" position="bottom" round  :style="{ height: '30%' }" >
      <van-picker
        title="选择主题"
        show-toolbar
        :columns="themeList"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
    data() {
        return {
          //表单项
          addForm: {
            themeName: '',
            tittle: '',
            body: ''
          },
          //主题项
          themeList: [],
          showPicker: false
        }
    },
    created() {
      this.getThemeList()
    },
    methods: {
      async getThemeList() {
        const {data: res} = await this.$http.get("/api/post/getAllThemeForUser")
          if (res.code !== 200) {
            this.$toast('主题加载失败')
            return
          }
          this.themeList = res.data
          console.log(res.data)
      },
      onConfirm(value) {
        this.addForm.themeName = value
        this.showPicker = false
      },
      // 提交表单
      async onSubmit() {
        const {data: res} = await this.$http.post("/api/post/addPostFromUser",this.addForm)
        if (res.code !== 200) {
          this.$toast('发表失败')
          return
        }
        this.$toast('发表成功')
        this.$router.push('/main')
      }
    }
}
</script>

<style lang="less" scoped>
.addPost {
  background-color: whitesmoke;
  height: 100%;
}
.quill-editor {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
}
.btnAdd {
  width: 95%;
  margin: 10px;
}
</style>